import React from 'react';
import {browserHistory,Link} from 'react-router';
import { Form, Button, Input, Select, message,  Cascader,Modal ,Table,Icon,InputNumber,AutoComplete} from 'antd';
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = AutoComplete.Option;
class AddPrescriptionTemplate extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            paths:this.props.location,
            rolesOptions: [],
            type: this.props.params.id,
            data:[{id:1}]
        }
        this.saveData = this.saveData.bind(this);
        this.cancelSave = this.cancelSave.bind(this);
    }
    componentWillMount() {
    }
    componentDidMount() {
    }
    //保存科室
    saveData(){
        this.props.form.validateFields((err,values)=> {
            console.log(values);
            //发送Ajax请求，将信息post，增加门店信息
        })
    }
    //取消保存
    cancelSave(){
        Modal.confirm({
            title:'取消保存',
            content:'确认取消保存并返回科室列表页面吗？',
            onCancel:()=>{console.log('取消')},
            onOk:()=>{
                browserHistory.push('registrationFeeManage');
            }
        })
    }
    //删除医生挂号费数据
    deleteDepartment(store) {
        Modal.confirm({
            title: '删除门店',
            content: '确认删除该挂号费数据吗?',
            onCancel: () => { message.info('取消删除该挂号费数据') },
            onOk: () => {
                console.log(store.id);
                var data1=this.state.data;
                for(var i=0;i<data1.length;i++){
                    if(store.id==data1[i].id){
                        data1.splice(i,1);
                    }
                }
                console.log(data1);
                 this.setState({
                     data:data1
                 });
                console.log(this.state.data);
            }
        })
    }
    //编辑医生挂号费信息
    editDepartment(store) {
        console.log(store);
        let paths = {
            pathname: 'addStoreForm',
            state: JSON.stringify(store),
        }
        browserHistory.push({
            pathname:paths.pathname,
            query:{},
            state:'haha'
        });
    }
    addAnotherPrescription(store){
        console.log(store);
        this.state.data.push({id:store.id-0+1})
        this.setState({
            data:this.state.data
        });
        console.log(this.state.data);

    }
    render() {
        //自动完成药品名称的dataSource
        const dataSource = ['金银花颗粒', '感冒灵颗粒', '田七'];
        //自动完成用法的dataSource
        const dataSource1 = ['口服', '外用'];
        const dataSource2 = ['三次每天', '二次每天'];
        const columns = [
            {
                title: '序号',
                width: 50,
                dataIndex: 'id',
            },
            {
                title: '药品名称',
                width: 30,
                render: (text, record) => (
                    <FormItem {...formItemLayout} style={{ display: 'inline-block', width: '100%' }} >
                        {getFieldDecorator('drugsName'+record.id, {
                            rules: [{ required: true, message: '请输入药品名称' }],
                        })(
                            <AutoComplete
                                dataSource={dataSource}
                                placeholder="请输入或选择药品"
                                filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                            />
                        )}
                    </FormItem>
                )
            },
            {
                title: '剂量（次）',
                width: 150,
                render: (text, record) => (
                    <FormItem {...formItemLayout} style={{ display: 'inline-block', width: '100%' }} >
                        {getFieldDecorator('templateName'+record.id, {
                            rules: [{ required: true, message: '请输入剂量' }],
                        })(
                            <InputNumber min={1}  placeholder="请输入大于0的数字" style={{ display: 'inline-block', width: '100%' }}/>
                        )}
                    </FormItem>
                )
            }, {
                title: '规格',
                width: 150,
                render: (text, record) => (
                    <FormItem {...formItemLayout}style={{ display: 'inline-block', width: '100%' }} >
                        {getFieldDecorator('spec'+record.id, {
                            initialValue: "0",
                            rules: [{ required: true, message: '规格不能为空' }],
                        })(
                            <Select style={{ width: "150px" }}>
                                <Option value="0">g</Option>
                                <Option value="1">ml</Option>
                                <Option value="2">mg</Option>
                                <Option value="3">袋</Option>
                                <Option value="4">盒</Option>
                                <Option value="5">支</Option>
                                <Option value="6">瓶</Option>
                            </Select>
                        )}
                    </FormItem>
                )
            },{
                title: '用法',
                width: 150,
                render: (text, record) => (
                    <FormItem {...formItemLayout} style={{ display: 'inline-block', width: '100%' }} >
                        {getFieldDecorator('chooseUseWay'+record.id, {
                            rules: [{ required: true, message: '请输入或选择用法' }],
                        })(
                            <AutoComplete
                                dataSource={dataSource1}
                                placeholder="请输入或选择用法"
                                filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                            />
                        )}
                    </FormItem>
                )
            }, {
                title: '操作',
                width: 100,
                render: (text, record) => {

                    if(record.id==this.state.data[this.state.data.length-1].id){
                        return (
                            <div>
                                <Button onClick={this.addAnotherPrescription.bind(this, record)} type="primary" ><Icon type="plus" /></Button>
                                <Button onClick={this.deleteDepartment.bind(this, record)}  type="danger" disabled={this.state.data.length==1?true:false}>删除</Button>
                            </div>
                        )}else{
                        return (
                            <div>
                                <Button onClick={this.deleteDepartment.bind(this, record)}  type="danger">删除</Button>
                            </div>
                        )
                    }
                }
            }
        ];
        const formItemLayout = { labelCol: { span: 0}, wrapperCol: { span: 24 } };
        const formItemLayout1 = { labelCol: { span:6}, wrapperCol: { span: 18} };
        const { getFieldDecorator } = this.props.form;
        return (
            <div className='container'>
                <div className='add-department-box' id="add-prescription-table">
                    <div className="show-template">
                        <span>*新增处方模板</span>
                    </div>
                    <div className='storeRow' style={{marginBottom:'20px'}}>
                        <FormItem {...formItemLayout1} label="药方名称" style={{ display: 'inline-block', width: '50%' }} >
                            {getFieldDecorator('medicalName', {
                                rules: [{ required: true, message: '模板名称' }],
                            })(
                                <Input placeholder="请输入药方名称" />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label="关联科室" style={{ display: 'inline-block', width: '50%' }} >
                            {getFieldDecorator('relatedDepartment', {
                                initialValue: "1",
                                rules: [{ required: true, message: '关联科室不能为空'}],
                            })(
                                <Select style={{ width: '100% '}}>
                                    <Option value="1">内科</Option>
                                    <Option value="0">外科</Option>
                                </Select>
                            )}
                        </FormItem>
                    </div>
                    <Table
                        rowKey={record => record.id}
                        columns={columns}
                        pagination={false}
                        bordered
                        dataSource={this.state.data}
                    />
                    <div className='storeRow' style={{marginTop:'30px',marginBottom:'30px'}}>
                        <FormItem {...formItemLayout1} label="用法" style={{ display: 'inline-block', width: '20%' }} >
                            {getFieldDecorator('totalMedicalName')(
                                <AutoComplete
                                    dataSource={dataSource1}
                                    placeholder="请输入或选择用法"
                                    filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                                />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label="频次" style={{ display: 'inline-block', width: '20%' }} >
                            {getFieldDecorator('howLong')(
                                <AutoComplete
                                    dataSource={dataSource2}
                                    placeholder="请输入或选择频次"
                                    filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                                />
                            )}
                        </FormItem>
                        <FormItem {...{ labelCol: { span: 8 }, wrapperCol: { span: 12 } }} label="服用天数" style={{ display: 'inline-block', width: '30%' }}>
                            {getFieldDecorator('days', {
                                rules: [
                                    { pattern: /^[0-9]{1,5}$/, message: '请输入整数数字' }
                                ]
                            })(
                                <Input  addonAfter="天" placeholder="请输入整数数字" />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label="取药方式" style={{ display: 'inline-block', width: '25%' }} >
                            {getFieldDecorator('wayToGetMedicine', {
                                initialValue: "1",
                            })(
                                <Select style={{ width: '100% '}}>
                                    <Option value="1">自取</Option>
                                    <Option value="0">快递</Option>
                                </Select>
                            )}
                        </FormItem>
                    </div>
                    <div style={{maxWidth:800,textAlign:'right',marginTop:10}}>
                        <Button type='primary' style={{marginRight:15}} onClick={this.saveData}>确定</Button>
                        <Button onClick={this.cancelSave}>取消</Button>
                    </div>
                </div>
            </div>
        )
    }
}
const AddPrescriptionTemplateForm = Form.create()(AddPrescriptionTemplate);
export default AddPrescriptionTemplateForm;